<script setup lang="tsx">
import { nextTick, onMounted, ref } from "vue";
import { TableInstance } from "element-plus";

const tableData = ref([
  {
    id: 1,
    name: "Alice",
    age: 25,
    type: "No. 189, Grove St, Los Angeles",
    updateTime: "192093102930122222222222222222",
    system: "12333333333333333333333333",
    status: "120",
  },
  { id: 2, name: "Bob", age: 30, type: "No. 189, Grove St, Los Angeles" },
  { id: 3, name: "Charlie", age: 22 },
  { id: 3, name: "Dill", age: 22 },
]);
const column = [
  {
    label: "名称",
    prop: "name",
    width: 200,
  },
  {
    label: "类型",
    prop: "type",
  },
  {
    label: "更新时间",
  },
  {
    label: "系统内置",
    prop: "system",
    showOverflowTooltip: true,
  },
  {
    label: "状态",
    prop: "status",
    render: (scope: any) => {
      return (
        <span style={{ color: "red" }}>
          use render function: {scope.row.status}
        </span>
      );
    },
  },
];
const refTable = ref<TableInstance>();

const page = ref(1);

onMounted(async () => {
  await nextTick();
});
</script>

<template>
  <el-card header="支持TSX的实例">
    <nf-table
      ref="refTable"
      v-model:page="page"
      :data="tableData"
      :column="column"
      :max-height="300"
      stripe
      border
      pagination
      :pagination-config="{
        total: 100,
        defaultCurrentPage: 10,
        layout: 'prev,pager,next, ->, total',
        background: true,
        onCurrentChange: (page) => {
          console.log(page);
        }
      }"
    >
    </nf-table>
  </el-card>
</template>

<style scoped lang="scss"></style>
